<template>
  <div class="w-100 d-flex flex-wrap justify-center font-size-10" :style="`${publicStyle}`">
    <div
      class="min-hegiht-10"
      :class="[
        bgImageClass,
        `text-shadow-${textShadow}`,
        'pa-2 ma-2 suoluetu-wrap flex-jc-ac ',
        firstSliderBgImg,
        swiperActiveSliderIndex !== 0 ? 'opacity-5' : '',
      ]"
      @click="swiperToIndex(0)"
    >
      <div class="text-truncate w-100" :style="thZhutiTitleStyle">
        <p>{{ zhutiTitle }}</p>
        <br />
      </div>
    </div>
    <div
      class="min-hegiht-10"
      :class="[
        bgImageClass,
        'pa-2 ma-2  suoluetu-wrap flex-jc-ac',
        swiperActiveSliderIndex !== 1 ? 'opacity-5' : '',
        `text-shadow-${textShadow}`,
      ]"
      @click="swiperToIndex(1)"
    >
      <div class="text-truncate w-100" :style="thTextStyle">
        <p>{{ title }}</p>
      </div>
    </div>
    <div
      v-for="(c, i) in createRow"
      :key="i"
      :class="[
        bgImageClass,
        'pa-2 ma-2 suoluetu-wrap min-hegiht-10 d-flex justify-center align-center flex-column',
        i + 2 !== swiperActiveSliderIndex ? 'opacity-5' : '',
        `text-shadow-${textShadow}`,
      ]"
      @click="swiperToIndex(i + 2)"
    >
      <div class="text-truncate w-100" :style="thTextStyle" v-for="(t, x) in c" :key="x">
        <p>{{ t }}</p>
      </div>
    </div>
  </div>
</template>
<script>
import "../index.css";

export default {
  name: "JcThumbnail",
  props: {
    firstSliderBgImg: {
      type: String,
      default: "firstBgjb-t",
    },
    swiperActiveSliderIndex: {
      type: Number,
      default: 0,
    },
    createRow: {
      type: Array,
      default: () => [],
    },
    zhutiTitle: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
    thTextStyle: {
      type: Object,
      default: () => ({}),
    },
    thZhutiTitleStyle: {
      type: Object,
      default: () => ({}),
    },
    bgImageClass: {
      type: String,
      default: "bgjb",
    },
    textShadow: {
      type: Number,
      default: 0,
    },
    publicStyle: {
      type: String,
      default: "",
    },
  },
  methods: {
    swiperToIndex(index) {
      this.$emit("change", index);
    },
  },
};
</script>
<style scoped>
.min-hegiht-10 {
  min-height: 6rem;
}
.suoluetu-wrap {
  width: calc(50% - 18px);
  color: #ffffff;
  max-width: 160px;
}
.flex-jc-ac {
  display: flex;
  align-items: center;
  justify-content: center;
}
.opacity-5 {
  opacity: 0.5;
}
.font-size-10 {
  font-size: 10px;
}
</style>
